<template>
  <div>
    <div class="tt">
      <div class="top">
        <div class="title">{{ title }}</div>
        <div class="logout">
          <el-button type="primary" @click="logout()">退出登录</el-button>
        </div>
      </div>
    </div>
    <div class="navigation"></div>
    <el-row class="tac">
      <el-col :span="12">

        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>日常防控管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item @click="fun1" name="daka" index="1-1">打卡记录</el-menu-item>
              <el-menu-item @click="fun2" index="1-2">健康打卡申报</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>异常人员管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="fun3">疑似/确诊人员登记</el-menu-item>
              <el-menu-item index="2-2" @click="fun4">隔离人员记录</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-box"></i>
              <span>防疫物资管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="fun5">新增防疫物资</el-menu-item>
              <el-menu-item index="3-2" @click="fun6">防疫物资查看</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>疫情概况</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="fun7">防疫数据可视化</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <div class="content">
      <div class="main" v-show="$store.state.show"><h1>欢迎进入疫情管理系统</h1></div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Index',
  components: {},
  created() {
    // var store = require('store');

    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("storedata")) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("storedata"))))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里

    if (this.$route.path != "/index") {
      this.$router.replace("/index")
      this.$store.state.show = true
    }

    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("storedata", JSON.stringify(this.$store.state))
    });
  },
  methods: {
    logout() {
      this.$message({
        showClose: true,
        message: '退出登录成功！',
        type: 'success'
      });
      this.$router.push('/')
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    fun1() {
      this.title = "打卡记录"
      this.$store.state.show = false
      this.$router.push('/index/RecordManage')
    },
    fun2() {
      this.title = "健康打卡申报"
      this.$store.state.show = false
      this.$router.push('/index/AddRecord')
    },
    fun3() {
      this.title = "疑似/确诊人员登记"
      this.$store.state.show = false
      this.$router.push('/index/IdenManage')
    },
    fun4() {
      this.title = "隔离人员记录"
      this.$store.state.show = false
      this.$router.push('/index/IsManage')
    },
    fun5() {
      this.title = "防疫物资查看"
      this.$store.state.show = false
      this.$router.push('/index/AddMaterial')
    },
    fun6() {
      this.title = "新增防疫物资"
      this.$store.state.show = false
      this.$router.push('/index/MaterialManage')
    },
    fun7() {
      this.title = "防疫数据可视化"
      this.$store.state.show = false
      this.$router.push('/index/EChart')
    }
  },
  data: function () {
    return {
      isShow: this.$store.state.show,
      title: "校园防疫管理系统"
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.tt {
  line-height: 60px;
  position: relative;
}

.logout {
  line-height: 60px;
  position: absolute;
  right: 20px;
}

.title {
  width: 500px;
  line-height: 60px;
  position: absolute;
  left: 278px;
  font-size: 20px;
  font-family: "宋体";
}

.top {
  position: absolute;
  height: 60px;
  width: 100%;
  background-color: white;
  float: right;
  z-index: 1;
  box-shadow: grey 1px 1px 3px;
  right: 1px;
}

.navigation {
  width: 250px;
  height: 100%;
  background-color: #545c64;
  position: absolute;
  z-index: 1;
}

ul {

  position: relative;
  width: 250px;
  /*float: left;*/
  z-index: 2;
}

.el-menu-item-group__title {
  padding: 0 !important;
}

.content {
  width: 80%;
  height: 85%;
  position: absolute;
  top: 80px;
  left: 270px;
  /*background-color: gray;*/
  /*background-color: white;*/
  z-index: 2;
}

.main {
  height: 100px;
  width: 400px;
  margin: 200px auto;
}
</style>
